<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>组件化编程-局部组件</title>
</head>
<body>
<div id="app">
  <h1>组件化编程-局部组件</h1>
  <!--    使用局部组件
    该组件是从挂载到app的vue实例中获取
  -->
  <my_counter></my_counter><br/>
  <my_counter></my_counter>
</div>

<div id="app2">
  <h1>组件化编程-局部组件-app2</h1>
  <!--    使用局部组件
    该组件是从挂载到app的vue实例中获取
  -->
  <super_counter></super_counter><br/>
  <super_counter></super_counter>
</div>

<script src="vue.js"></script>
<script type="text/javascript">
  /*
    1.定义一个组件,组件名称为buttonCounter
    2.可以把常用的组件,定义在某个common.js中,并导出组件
    3.如果某个页面需要使用,直接使用模块化编程导入组件即可
   */
  const buttonCounter = {
    template:`<button v-on:click="click()">点击次数={{count}}(局部组件化方式)</button><br/>`,
    data() {
      return{
        count:0
      }
    },
    methods:{
      click() {
        this.count++;
      }
    }
  }

  let vm = new Vue({
    el:"#app",
    components:{
      //引入/注册某个组件,此时my_counter 就是一个局部组件
      //使用范围在当前Vue实例
      'my_counter':buttonCounter
    }
  })

  let vm2 = new Vue({
    el:"#app2",
    components:{
      //引入/注册某个组件,此时my_counter 就是一个局部组件
      //使用范围在当前Vue实例
      'super_counter':buttonCounter
    }
  })
</script>
</body>
</html>